<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>Shogia Chess</title>
<style>
    html, body{
        margin: 0;
        padding: 0;
    }
    body{
        width: 100vw;
        height: 100vh;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: auto;
    }

    pre, ul, input,select{
        margin: 0;
        padding: 0;
    }
    input,select{
        background-color: transparent;
        border: none;
        outline: none;
    }
    a{
        color:black;
    }
    label, .label{
        cursor: default;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    html{
        font-size: 4vh;
    }
    body{
        margin: 0 auto;
        min-width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        max-height: 100vh;
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
    }
    svg {
        user-select:none;
    }

    #box-game {
        width: 100%;
        height: 100%;
        background-color: #505050;
    }

    #box-game-layout {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: stretch;
    }

    .top-line {
        width: 100%;
        height: 2rem;
        line-height: 2rem;
        font-size: 1rem;
        background-color: #303030;
        color: #909090;
        text-align: center;
        border-bottom: 1px solid gray;
    }

    #ai-status {
        height: 1.5rem;
        line-height: 1.5rem;
        color: #aaaaaa;
    }

    #game-area {
        flex: 1;
        width: 100%;
        height: 100%;
        display: grid;
        justify-content: center;
        align-content: center;
        align-items: center;
        grid-gap: 1px;
    }
    .pbox {
        background-color: #ffbb06;
        color: dimgray;
        cursor: pointer;
        transition: 0.5s;
        width: 5.6vh;
        height: 5.6vh;
        line-height: 5.6vh;
        text-align: center;
        font-size: 100%;
        position: relative;
    }
    .pbox-inhand {
        background-color: #333333;
    }
    .pbox-move {
        background-color: #7eb000;
    }
    .pbox-put {
        background-color: #00907a;
    }
    .pbox-eat {
        background-color: #cb0d0d;
    }
    .in-pbox, .in-pbox-piece, .in-pbox-gote, .in-pbox-cursor, .in-pbox-canmove {
        position: absolute;
        width: 96%;
        height: 96%;
        top: 2%;
        left: 2%;
        z-index: 1;
    }
    .in-pbox-sel-nari {
        display: flex;
        flex-direction: column;
        background-color: #bd8a00;
        border: 1px solid white;
        height: 200%;
        z-index: 4;
    }
    .in-pbox-gote {
        rotate: 180deg;
    }
    .in-pbox-cursor {
        z-index: 2;
    }
    .in-pbox-canmove {
        z-index: 3;
    }

    .game-tools {
        background-color: #505050;
        width: 100%;
        height: 6vh;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: center;
        font-size: 1rem;
        user-select: none;
    }
    .game-tool, .game-tool select {
        color: #aaaaaa;
        cursor: pointer;
    }
    .game-tool:hover {
        background-color: #707070;
        color: #f0f0f0;
        transition: 0.5s;
    }
    .game-tool #use-ai-sente, .game-tool #use-ai-gote {
        margin-left: 0.5rem;
    }

    ux-template {
        display: none;
    }
</style>
</head>
<body>
<div id="box-game">
    <div id="box-game-layout">
        <div id="game-status" class="top-line"></div>
        <div id="ai-status" class="top-line"></div>
        <div id="game-area"></div>
        <div class="game-tools">
            <div class="game-tool">UCT:
                <select id="sel-uct-max-times">
                    <option ux-value="1024">1024</option>
                    <option ux-value="4096">4096</option>
                    <option ux-value="8192">8192</option>
                    <option ux-value="16384">16384</option>
                    <option ux-value="32768">32768</option>
                    <option ux-value="65536">65536</option>
                    <option ux-value="131072">131072</option>
                    <option ux-value="262144">262144</option>
                </select>
            </div>
            <div class="game-tool">DEPTH:
                <select id="sel-depth-max">
                    <option ux-value="4">4</option>
                    <option ux-value="6">6</option>
                    <option ux-value="8">8</option>
                    <option ux-value="10">10</option>
                    <option ux-value="12">12</option>
                    <option ux-value="14">14</option>
                    <option ux-value="16">16</option>
                </select>
            </div>
        </div>
        <div class="game-tools">
            <div class="game-tool" id="cmd-reset">重开</div>
            <div class="game-tool"><label>AI<input type="checkbox" id="use-ai-sente" />☖<input type="checkbox" id="use-ai-gote" />☗</label></div>
            <div class="game-tool" id="cmd-undo-to-first">≪</div>
            <div class="game-tool" id="cmd-undo">◀</div>
            <div class="game-tool" id="cmd-redo">▶</div>
            <div class="game-tool" id="cmd-redo-to-last">≫</div>
        </div>
    </div>
</div>
<ux-template id="pbox">
    <div class="pbox" style="grid-row:[ROW]; grid-column:[COL];"></div>
</ux-template>
<ux-template id="piece">
    <div class="[CLASS]">
        <svg height="100%" width="100%" viewBox="0 0 100 100">
            <polygon points="10,15 50,5 90,15 95,92 5,92" stroke-width="2" fill="#fee572" stroke="black" />
            <rect x="5" y="92" width="90" height="7" fill="#ad893d" stroke-width="1" stroke="black"></rect>
            <text x=50 y=74 font-size=68 text-anchor="middle" fill="#3f3f3f" font-family="楷体,宋体">[WORD]</text>
        </svg>
    </div>
</ux-template>
<ux-template id="piece-nari">
    <div class="[CLASS]">
        <svg height="100%" width="100%" viewBox="0 0 100 100">
            <polygon points="10,15 50,5 90,15 95,92 5,92" stroke-width="2" fill="#fee572" stroke="black" />
            <rect x="5" y="92" width="90" height="7" fill="#ad893d" stroke-width="1" stroke="black"></rect>
            <text x=50 y=74 font-size=68 text-anchor="middle" fill="#ff0000" font-family="楷体,宋体">[WORD]</text>
        </svg>
    </div>
</ux-template>
<ux-template id="piece-sel-nari">
    <div class="in-pbox-sel-nari [CLASS]" n="0">
        <svg height="100%" width="100%" viewBox="0 0 100 100" mi="0">
            <polygon points="10,15 50,5 90,15 95,92 5,92" stroke-width="2" fill="#fee572" stroke="black" />
            <rect x="5" y="92" width="90" height="7" fill="#ad893d" stroke-width="1" stroke="black"></rect>
            <text x=50 y=72 font-size=64 text-anchor="middle" fill="#3f3f3f" font-family="楷体,宋体">[WORD-1]</text>
        </svg>
        <svg height="100%" width="100%" viewBox="0 0 100 100" mi="1">
            <polygon points="10,15 50,5 90,15 95,92 5,92" stroke-width="2" fill="#fee572" stroke="black" />
            <rect x="5" y="92" width="90" height="7" fill="#ad893d" stroke-width="1" stroke="black"></rect>
            <text x=50 y=72 font-size=64 text-anchor="middle" fill="#ff0000" font-family="楷体,宋体">[WORD-2]</text>
        </svg>
    </div>
</ux-template>
<ux-template id="piece-inhand">
    <div class="[CLASS]">
        <svg height="100%" width="100%" viewBox="0 0 100 100">
            <polygon points="10,15 50,5 90,15 95,92 5,92" stroke-width="2" fill="#fee572" stroke="black" />
            <rect x="5" y="92" width="90" height="7" fill="#ad893d" stroke-width="1" stroke="black"></rect>
            <text x=50 y=72 font-size=64 text-anchor="middle" fill="#3f3f3f" font-family="楷体">[WORD]</text>
            <rect x="60" y="60" width="35" height="35" fill="#808080" stroke-width="2" stroke="black" opacity="0.6"></rect>
            <text x="65" y="90" font-size="32" fill="white">[N]</text>
        </svg>
    </div>
</ux-template>
<ux-template id="canmove">
    <div class="in-pbox-canmove">
        <svg height="100%" width="100%" viewBox="0 0 100 100">
            <circle cx=50 cy=50 r=20 fill="green" opacity="0.7"/>
        </svg>
    </div>
</ux-template>
<ux-template id="cursor">
    <div class="in-pbox-cursor">
        <svg height="100%" width="100%" viewBox="0 0 100 100">
            <line x1=2 x2=32 y1=2 y2=2 stroke-width="6" stroke="white"></line>
            <line x1=2 x2=2 y1=2 y2=32 stroke-width="6" stroke="white"></line>
            <line x1=68 x2=98 y1=2 y2=2 stroke-width="6" stroke="white"></line>
            <line x1=98 x2=98 y1=2 y2=32 stroke-width="6" stroke="white"></line>
            <line x1=2 x2=32 y1=98 y2=98 stroke-width="6" stroke="white"></line>
            <line x1=2 x2=2 y1=68 y2=98 stroke-width="6" stroke="white"></line>
            <line x1=68 x2=98 y1=98 y2=98 stroke-width="6" stroke="white"></line>
            <line x1=98 x2=98 y1=68 y2=98 stroke-width="6" stroke="white"></line>
        </svg>
    </div>
</ux-template>
</body>
<script>document.write(((a,b)=>(`${a}t type="module" src="./main.js?fuck=${Date.now()}">${b}t>`))("<scrip","</scrip"))</script>
</html>
